<template>
  <div class="center">
    <el-form
      v-loading="loading"
      :model="userparams"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      label-position="left"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="user_login">
        <el-input
          type
          v-model="userparams.user_login"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="user_pass">
        <el-input
          type="password"
          v-model="userparams.user_pass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-button class="btn" @click="submitForm">保存</el-button>
    </el-form>
  </div>
</template>
<script>
import { userAdd, userUpdate } from "@/api/user";
import { validatePassword } from "@/utils/validate";
export default {
  data() {
    return {
      userparams: {
        user_login: "",
        user_pass: "",
      },
      loading: false,
      rules: {
        user_login: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        user_pass: [
          { required: true, validator: validatePassword, trigger: "blur" },
        ],
      },
    };
  },
 async created() {
      await this.closes()
  console.log('重置成功');
 },
  methods: {
    // 重置表单
    closes(){
    //  this.$refs.ruleForm.resetFields()
      this.resetForm('ruleForm')
    },
    // 取消抽屉的显示
    handleCancle(status) {
      this.$emit("close", status);
    },
    // 确定
    submitForm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return;
        this.loading = true;
        console.log("添加成功"); //添加
        try {
             const res = await userAdd(this.userparams);
             this.loading = false;
             console.log(res);
             this.$message.success("添加成功");
             this.handleCancle(false);
        } catch (error) {
            // this.$message.error('添加失败！！')
          this.loading = false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.demo-ruleForm {
  padding: 20px 20px;
  width: 100%;
  .btn {
    width: 137px;
    background: #dd8341;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    margin: 10px 44%;
    box-sizing: border-box;
  }
}
</style>